<template>
  <div class="container">
    <div class="title">{{year}}年{{benbuplan.name || benbuyeji.name}}团队年度规划</div>
    <div class="panel">
      <div class="name">{{benbuplan.name || benbuyeji.name}}</div>
      <div class="words">{{year}}年已规划业绩：￥{{benbuplan.planfeat || 0}}元</div>
      <div class="words">{{year}}年已完成业绩：￥{{benbuyeji.xj || 0}}元</div>
    </div>
    <ul class="employee_ul" v-if="groupyearplanList.length > 0">
      <li class="employee_li flex" v-for="(item,index) in groupyearplanList" :key="item.userid" :data-userid="item.userid" :data-index="index" v-if="item.isdisable == 0">
        <span class="user_pic"><img :src="item.headurl || '/static/imgs/system_user.png'" alt=""></span>
        <div class="user_info flex-item">
          <label class="user_name">{{item.username}}</label>
          <label class="user_details" v-if="a.userid == item.userid" v-for="(a,plan) in yearplan" :key="a.userid" :data-index="plan">规划业绩：￥{{a.plfeat || 0}}元</label>
          <label class="user_details" v-if="b.userid == item.userid" v-for="(b,result) in personresult" :key="b.userid" :data-index="result">已完成业绩：￥{{b.totalfeat || 0}}元</label>
        </div>
      </li>
    </ul>
    <Empty message="暂无团队年度规划！" v-if="groupyearplanList.length == 0"></Empty>
  </div>
</template>

<script>
import wx from 'wx'
import moment from 'moment'
import api from '@/utils/api'
// import Toast from '@/utils/toast'
export default {
  data () {
    return {
      windowHeight: 0,
      year: moment().year(),
      month: moment().month() + 1,
      choosevalue: '',
      num: 1,
      gusetid: '',
      arrivetime: '',
      focus: false,
      yearplan: [],
      groupyearplanList: [],
      personresult: [],
      benbuplan: '',
      benbuyeji: '',
      newlist: []
    }
  },
  components: {
  },
  onLoad () {
    // let that = this
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
    this.groupyearplan()
  },
  onShow () {
  },
  computed: {
  },
  methods: {
    async groupyearplan () {
      let jsonshop = wx.getStorageSync('userInfo').jsonshop;
      let floor = wx.getStorageSync('userInfo').floor;
      let starttime = moment(`${this.year}-01-01 00:00:00`, 'YYYY-MM-DD hh:mm:ss').unix();
      let endtime = moment(`${this.year}-12-31 23:59:59`, 'YYYY-MM-DD hh:mm:ss').unix();
      const res = await api.getgroupyearplan({
        floor: floor,
        jsonshop: jsonshop,
        start_time: starttime,
        end_time: endtime
      })
      if (res.code === '100') {
        this.yearplan = res.yearplan
        this.groupyearplanList = res.userinfo
        this.personresult = res.personresult
        this.benbuplan = res.benbuplan
        this.benbuyeji = res.benbuyeji
        let a = this.distinct(this.personresult, this.yearplan)
        console.log(a)
        let b = this.concat(this.personresult, this.yearplan);
        console.log(b)
      }
    },
    distinct (soureArr, targetArr) {
      soureArr.forEach(sourceItem => {
        if (targetArr.every(targetItem => sourceItem.userid !== targetItem.userid)) {
          targetArr.push(sourceItem);
        }
      });
      return targetArr;
    },
    concat (arr1, arr2) {
      // 不要直接使用var arr = arr1，这样arr只是arr1的一个引用，两者的修改会互相影响
      let arr = arr1.concat();
      // 或者使用slice()复制，let arr = arr1.slice(0)
      for (let i = 0; i < arr2.length; i++) {
        arr.indexOf(arr2[i]) === -1 ? arr.push(arr2[i]) : 0;
      }
      return arr;
    }
  }
}
</script>

<style scoped>
.container {
  background: rgba(153, 153, 153, 0.1) !important;
}
.title {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #fff;
  color: #333;
  font-size: 28rpx;
  font-weight: 600;
  margin-bottom: 40rpx;
}
.panel {
  width: 100%;
  background: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}
.employee_ul {
  width: 100%;
  padding-left: 32rpx;
  background: #fff;
}
.employee_ul .employee_li {
  width: 100%;
  padding: 28rpx 0;
  border-bottom: 2rpx solid RGBA(153, 153, 153, 0.2);
}
.employee_ul .employee_li .user_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.employee_ul .employee_li img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.employee_ul .employee_li .user_info label {
  display: block;
}
.employee_ul .employee_li .user_info .user_name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 42rpx;
  color: rgba(102, 102, 102, 1);
  margin-bottom: 10rpx;
}
.employee_ul .employee_li .user_info .user_details {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.employee_ul .employee_li .user_info .user_details.red {
  color: #ff4444;
}
</style>
